<template>
  <div class="login-container">
    <div class="header">
      <h1>欢迎来到Melody Chat</h1>
    </div>

    <div class="buttons-container">
      <button class="guest-btn" @click="handleGuestLogin">访客访问</button>
      <button class="member-btn" @click="handleMemberLogin">会员登录</button>
    </div>

    <div class="agreement-container">
      <div class="agreement-checkbox" @click="toggleAgreement">
        <div :class="['checkbox-icon', { checked: agreed }]">
          <span v-if="agreed">✓</span>
        </div>
        <span>我同意以下协议条例规范</span>
      </div>

      <div class="agreement-links">
        <a href="#" @click.prevent="showAgreement('privacy')">《隐私政策》</a>
        <a href="#" @click.prevent="showAgreement('service')">《服务协议》</a>
        <a href="#" @click.prevent="showAgreement('terms')">《法律条款》</a>
      </div>
    </div>
    <!-- :model-value="showAuthDialog"
    @update:model-value="(newValue) => (showAuthDialog = newValue)" -->
    <!-- :dialog-type="authDialogType"
    @update:dialog-type="authDialogType = $event" -->
    <!-- 认证对话框 -->
    <AuthDialog
      ref="authDialogRef"
      v-model:model-value="showAuthDialog"
      v-model:dialog-type="authDialogType"
    />
    <!-- 协议弹框组件 -->
    <AgreementModal
      v-model:visible="showAgreementModal"
      :title="currentAgreementTitle"
      :content="currentAgreementContent"
      @close="handleAgreementClose"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useToast } from "vue-toastification";
import AuthDialog from "../components/AuthDialog.vue"; // 确保正确导入组件
import AgreementModal from "../components/AgreementModal.vue";

const toast = useToast();

const agreed = ref(false);
const showAuthDialog = ref(false);
const authDialogType = ref<
  "login" | "register-intro" | "register-form" | "forgot-password"
>("login");
const authDialogRef = ref<InstanceType<typeof AuthDialog> | null>(null);
const showAgreementModal = ref(false);
const currentAgreementTitle = ref("");
const currentAgreementContent = ref("");

// 协议内容（实际应用中应放在单独的文件中）
const agreements = {
  privacy: {
    title: "隐私政策",
    content: `Melody Chat非常重视用户隐私保护。本政策详细说明了我们如何收集、使用和保护您的个人信息。
      
1. 我们收集的信息
- 您在注册或使用服务时提供的个人信息
- 设备信息和使用数据
- 位置信息（仅在使用相关服务时）

2. 信息使用
我们使用收集的信息来：
- 提供、维护和改进我们的服务
- 提供客户支持
- 发送服务通知

3. 信息共享
除非得到您的明确同意，否则我们不会与第三方共享您的个人信息。`,
  },
  service: {
    title: "服务协议",
    content: `欢迎使用Melody Chat服务。请在使用前仔细阅读本协议。

1. 服务内容
Melody Chat是一个聊天应用，提供即时通讯服务。

2. 用户义务
您同意：
- 遵守所有适用的法律法规
- 不发送违法、骚扰性或侵犯他人权利的内容
- 不干扰服务的正常运行

3. 知识产权
服务包含的所有内容（文本、图形、软件等）均由Melody Chat或授权方所有，受版权法保护。`,
  },
  terms: {
    title: "法律条款",
    content: `本法律条款规定了Melody Chat用户在使用服务时应遵守的法律规范。

1. 使用条件
您必须年满18岁才能使用本服务。如果您未满18岁，请勿注册或使用我们的服务。

2. 免责声明
本服务按"原样"提供，不提供任何明示或暗示的担保。Melody Chat不保证服务不间断或无错误。

3. 责任限制
Melody Chat不对因使用或无法使用服务而引起的任何损害承担赔偿责任，除非法律另有规定。

4. 争议解决
任何与本服务有关的争议应提交至Melody Chat所在地有管辖权的法院解决。`,
  },
};

const toggleAgreement = () => {
  agreed.value = !agreed.value;
};

const showAgreement = (type: keyof typeof agreements) => {
  currentAgreementTitle.value = agreements[type].title;
  currentAgreementContent.value = agreements[type].content;
  showAgreementModal.value = true;
};

// 协议弹框关闭时的处理
const handleAgreementClose = () => {
  // 此处可添加逻辑，如用户关闭后自动勾选协议
  agreed.value = true;
  showAgreementModal.value = false;
};

// 访客访问
const handleGuestLogin = () => {
  if (!agreed.value) {
    toast.error("请先同意协议条款");
    return;
  }
  // 访客访问逻辑
  toast.success("欢迎访客访问");
};
// 会员登录
const handleMemberLogin = () => {
  if (!agreed.value) {
    toast.error("请先同意协议条款");
    return;
  }

  // 打开登录对话框
  authDialogType.value = "login";
  showAuthDialog.value = true;
};
// 打开注册对话框
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f8ff;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h1 {
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.buttons-container {
  width: 100%;
  max-width: 300px;
  margin-bottom: 40px;
}

.guest-btn,
.member-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.guest-btn {
  background-color: #fff;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.member-btn {
  background-color: #1890ff;
  color: white;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.guest-btn:active,
.member-btn:active {
  transform: scale(0.98);
}

.agreement-container {
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.checkbox-icon {
  width: 18px;
  height: 18px;
  border: 1px solid #999;
  border-radius: 4px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  transition: all 0.3s;
}

.checkbox-icon.checked {
  background-color: #1890ff;
  border-color: #1890ff;
  color: white;
}

.agreement-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
}

.agreement-links a {
  color: #1890ff;
  text-decoration: none;
}

.agreement-links a:hover {
  text-decoration: underline;
}

/* 协议模态框样式 */
.agreement-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

h2 {
  margin-bottom: 15px;
  text-align: center;
}

.agreement-text {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 20px;
}

.agreement-text p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  white-space: pre-line;
}

.close-btn {
  align-self: center;
  padding: 8px 20px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
